<!DOCTYPE html>
<html>
<head>
	<meta content="charset=utf-8">
	<title>FlexSlider Demo</title>
	
	<!-- FlexSlider pieces -->
    <link href="Styles/flexslider.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="jquery.flexslider-min.js"></script>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
	

	<!-- Hook up the FlexSlider -->
<script type="text/javascript">
			$(window).load(function() {
				$('.flexslider').flexslider({
					slideshow:true,
					randomize: false,  
					slideshowspeed:1000,
					animationDuration: 600, 
				  animation: "slide",
				  controlsContainer: ".flex-container"
			  });
			});
		</script>
</head>
<body>
	<div id="container">

		<!--=============================
		Markup for FADE animation
		=================================-->
	<div class="flex-container">
                <div class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="images/Zirca.png" />
                        </li>
                        <li>
                            <img src="images/Mavis2.png" />
                        </li>
                        <li>
                            <img src="images/Mr.Bean2.png" />
                        </li>
                        <li>
                            <img src="images/QianHu2.png" />
                        </li>
                        <li>
                            <img src="images/ToniAndGuy.png" />
                        </li>
                        <li>
                            <img src="images/Forever21.png" />
                        </li>
                        <li>
                            <img src="images/nature-photo6.png" />
                        </li>
                    </ul>
                </div>
            </div>
	  
		<!--============================
		Markup for SLIDE animation
		You need to add an extra container element for the overflow: hidden property on the slider
		
		Update your flexslider() function with the following properties:
		
		<script type="text/javascript">
			$(window).load(function() {
				$('.flexslider').flexslider({
				  animation: "slide",
				  controlsContainer: ".flex-container"
			  });
			});
		</script>
		=================================
		<div class="flex-container">
			<div class="flexslider">
		    <ul class="slides">
		    	<li>
		    		<img src="demo-stuff/inacup_samoa.jpg" />
		    		<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
		    	</li>
		    	<li>
		    		<a href="#"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
		    		<p class="flex-caption">This image is wrapped in a link!</p>
		    	</li>
		    	<li>
		    		<img src="demo-stuff/inacup_donut.jpg" />
		    	</li>
		    	<li>
		    		<img src="demo-stuff/inacup_vanilla.jpg" />
		    	</li>
		    </ul>
		  </div>
	 	</div>
		==================================-->
	</div>
</body>
</html>